<style>
    th{background-color:#f1f1f1}
    .nav{margin-bottom: 2px}
    #add{float:right}
</style>
<ul class="breadcrumb">当前位置：
    <a href="#">首页</a> <span class="divider">/</span>
    <a href="#">前台</a> <span class="divider">/</span>
    菜单设置
</ul>
<div class="title_right"><strong>菜单设置</strong></div>
<div style="margin:auto">
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="{:Url('index/bnr')}">BANNER设置</a></li>
        <li role="presentation"  class="active"><a href="{:Url('index/menuset')}">菜单设置</a></li>
    </ul>
    <button class="btn btn-primary" id="add">新增菜单</button>
    <table class="table table-bordered table-hover table-condensed" id="menutab">
        <tr>
<!--            <th>编号</th>-->
            <th>菜单名称 <a href="javascript:void(0)" onclick="togg(this)">[全部收缩]</a></th>
            <th>菜单标记</th>
            <th>排序</th>
            <th>指向路径</th>
            <th>状态</th>
            <th>打开方式</th>
            <th>操作</th>
        </tr>
        <?php if(!empty($menu) && is_array($menu)):?>
            <?php foreach ($menu as $k=>$v):?>
                <tr parent_id="{$v['id']}">
                    <td onclick="fade(this)">{$v['menuName']}</td>
                    <td>{$v['menuId']}</td>
                    <td>{$v['menuSort']}</td>
                    <td>{$v['menuViewurl']}</td>
                    <td>{$v['menuStatus'] ? '正常':'禁用'}</td>
                    <td>{$v['openType'] == '_self' ? '当前页':'新页面'}</td>
                    <td><a href="javascript:void(0)"></a></td>
                </tr>
            <?php if(!empty($v['children']) && is_array($v['children'])):?>
             <?php foreach ($v['children'] as $k2=>$v2):?>
                        <tr class="child{$v['id']}" >
                            <td style="padding-left:20px">{$v2['menuName']}</td>
                            <td>{$v2['menuId']}</td>
                            <td>{$v2['menuSort']}</td>
                            <td>{$v2['menuViewurl']}</td>
                            <td>{$v2['menuStatus'] ? '正常':'禁用'}</td>
                            <td>{$v2['openType'] == '_self' ? '当前页':'新页面'}</td>
                            <td><a href="{:Url('index/htmlContent','menuId='.$v2['menuId'].'&menuName='.$v2['menuName'])}">编辑内容</a></td>
                        </tr>
                    <?php endforeach;?>
                <?php endif;?>
            <?php endforeach;?>
        <?php endif;?>
    </table>
</div>
</div>
<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>添加菜单</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="menuName">菜单名称</label>
                <div class="controls">
                    <input type="text" id="menuName" placeholder="菜单名称" name="menuName" value="" >
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="menu_parentid">上级菜单</label>
                <div class="controls">
                    <select name="menu_parentid" id="menu_parentid" style="height:24px">
                        <option value="0" selected>顶级菜单</option>
                        <?php if(!empty($menu) && is_array($menu)):?>
                        <?php foreach ($menu as $k=>$v):?>
                                <option value="{$v['id']}">&nbsp;{$v['menuName']}</option>
                            <?php endforeach;?>
                        <?php endif;?>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="menuId">菜单标记</label>
                <div class="controls">
                    <input type="text" id="menuId" placeholder="菜单标记" name="menuId" value="">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="menuSort">排序</label>
                <div class="controls">
                    <input type="number" min="0" step="1" id="menuSort" value="1" name="menuSort">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="menuViewurl">指向路径</label>
                <div class="controls">
                    <input type="text" id="menuViewurl" value="" placeholder="跳转路径" name="menuViewurl">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">状态</label>
                <div class="controls">
                    <label class="radio inline">
                        <input type="radio" name="menuStatus" id="menuStatus1" value="1" checked>正常
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="menuStatus" id="menuStatus2" value="0">禁用
                    </label>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">打开方式</label>
                <div class="controls">
                    <label class="radio inline">
                        <input type="radio" name="openType" id="openType" value="_self" checked>当前页
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="openType" id="openType2" value="_blank">新页面
                    </label>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="button" class="btn btn-primary" id="sub">确定添加</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">关闭</a>
    </div>
</div>
<script>
    function togg(obj) {
        $('tr[class^="child"]').toggle();
        if($(obj).text() == '[全部收缩]'){
            $(obj).text('[全部展开]');
        }else{
            $(obj).text('[全部收缩]');
        }
    }
    
    function fade(obj) {
        var parent_id = $(obj).parent().attr('parent_id');
        $(obj).parent().nextAll('.child'+parent_id).toggle();
    }

    var apiUrl = '/api/AdminApi/';
    $(function () {
        $('#add').click(function () {
            $('#myModal').modal('show');
        })

        $('#sub').click(function () {
            var ary = $('form').serializeArray();console.info(ary)
            var flag = 1;
            var html = '<label style="float:right;text-align:left;color:red" class="control-label">请填写该字段</label>';
            $.each(ary,function (i,item) {
                $('#'+item['name']).next('label').remove();
                if($.trim(item['value']) == ''){
                    flag = 0;
                    $('#'+item['name']).parent().append(html);
                }
            });
            if(!flag) return false;
            
            $.post(apiUrl+'addMenu',$('form').serialize(),function (e) {
                if(e.status == 0){
                    $('#sub').next('label').remove();
                    var html = '<label style="float:right;text-align:left;color:red" class="control-label">'+e.msg+'</label>';
                    $('#sub').parent().append(html);
                }else{
                    $('#myModal').modal('hide');
                    window.location.reload();
                }
            });
        })
    })
</script>